<template>
    <div>
        <van-dropdown-menu>
            <van-dropdown-item v-model="value" disabled  :options="option" title="综合" @change="fun1(value)" />
            <van-dropdown-item v-model="value" :options="option" title="价格" @change="fun2(value,vals,value2)" />
            <van-dropdown-item v-model="value" :options="option1" title="分类" @change="fun3(value,vals,value1)" />
            <!-- {{ this.vals }} -->
          </van-dropdown-menu>
          <van-grid :border="false" :column-num="2">
            <van-grid-item v-for="item in sousuogoods " :key="item.id">
              <van-image :src="item.list_pic_url" />
              <p id="spm">{{item.name}}</p>
              <p id="spj">￥ {{item.retail_price | jiage()}} 元</p>
            </van-grid-item>
           
          </van-grid>
    </div>
</template>

<script>
import {Getsousuogoodss} from '../request/app.js'
export default {
    data() {
        return {
            value: '',
            value1: '',
            value2: '',
      switch1: false,
      switch2: false,
      option: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
 
      ],
      option1:[
        { text: '全部', value: 0 },
        { text: '居家', value: 1  },

      ]
        };
    },
    props:['sousuogoods','vals'],
    created(){
      // console.log(vals);

    },
    mounted() {
        
    },

    methods: {
      // 这里是因为要三参数
        fun2(value1,vals,value2){
            console.log(value1);
            console.log(vals);
            this.value1 = value1
            this.$emit('gd',this.value1)
            Getsousuogoodss(vals,value1,value2).then(res=>{
            console.log(res);
            console.log(value1);
            console.log(value2);
            // this.sousuogoods = res.data.data
        })
        },
        fun3(value2,vals,value1){
          console.log(vals);
          console.log(value2);
            this.value2 = value2
            this.$emit('qj',this.value2);
            Getsousuogoodss(vals,value2,value1).then(res=>{
            console.log(res);
            // this.sousuogoods = res.data.data
        })
        }
    },
    filters:{
        jiage:function(value){
            let val=''
      if(!isNaN(value) ){
        if(value %1==0){//整数
          val=value+".00"
        }
     
        else{//小数
          val=parseFloat(value).toFixed(2)
        }
      }
      return val
        }
    },  
};
</script>

<style  scoped>
    #spm{
        font-size: 10px;
        width: 100%;
        height: 50px;
        margin-top:-30px ;
        background-color: #fff;
        line-height: 50px;
        text-align: center;

    }
    #spj{
        margin-top:-20px ;

        font-size: 12px;
        color: brown;
    }
</style>